<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="X-UA-Compatible" content="edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>八里沟云生态平台</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="lib/jquery.min.js"></script>
    <script src="lib/lodash.min.js"></script>
    <script src="lib/echarts.min.js"></script>
    <script src="lib/soda.js"></script>
    <script src="js/comon.js"></script>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/bot.css">
    <style>
        .box {
            width: 100%;
            height: 1000px;
            display: flex;
        }

        .box .box-left {
            width: calc(50% - 10px);
            height: 1000px;
        }

        .box h1 {
            text-align: center;
            height: 70px;
            line-height: 70px;
        }

        .box .box-left .box-left-main {
            width: 100%;
            background: url(image/sheng-left.png) no-repeat;
            overflow: hidden;
            background-size: 100% 100%;
        }

        .box .box-left .box-left-main .shang {
            width: calc(100% - 20px);
            height: 308px;
            margin: 30px 15px;
            background: url(image/sheng-left-bg.png) no-repeat;
            display: flex;
            align-items: center;
            background-size: 100% 100%;
        }

        .box .box-left .box-left-main .shang .one,
        .two,
        .three {
            width: 33%;
            height: 248px;
            margin-top: 70px;
            margin-left: 5px;
            text-align: center;
        }

        /* .box .box-left .box-left-main .shang .two,
        .three {
            width: 308px;
        } */

        .box .box-left .box-left-main .shang .three img {
            margin-bottom: 15px;
        }

        .box .box-left .box-left-main .shang .one img {
            width: 112px;
            height: 96px;
        }

        .box .box-left .box-left-main .shang div p {
            margin-top: 60px;
            font-size: 18px;
        }

        .box .box-left .box-left-main .xia {
            margin: 0 13px;
            display: flex;
        }

        .box .box-left .box-left-main .xia div {
            width: 25%;
            margin: 0 3px;
            margin-bottom: 30px;
        }

        .box .box-left .box-left-main .xia div img {
            display: block;
            width: 100%;
        }

        .box .box-left .box-left-main .niao {
            display: flex;
            justify-content: space-between;
            flex-grow: 1;
            padding: 0 10px;
            margin-bottom: 20px;
        }

        .box .box-left .box-left-main .niao div {
            width: 33%;
            margin: 0 3px;
        }

        .box .box-left .box-left-main .niao div img {
            display: block;
            width: 100%;
        }

        .box .box-right {
            width: calc(50% - 10px);
            height: 1000px;
            margin-left: 20px;
        }

        .box .box-right .box-right-main {
            width: 100%;
            height: 370px;
            display: flex;
            background: url(image/sheng-right.png) no-repeat;
            background-size: 100% 100%;
        }

        .box .box-right .box-right-main .left,
        .box .box-right .box-right-main .right {
            width: 50%;
        }
        .box .box-right .box-right-main .left{
            margin-left: 20px;
        }
        .box .box-right .box-right-main .right{
            margin:0 10px;
        }
        .box .box-right .box-right-main .left #barEcharts {
            width: 100%;
            height: 270px;
            margin: 32px 0 0 5px;
        }

        .box .box-right .box-right-main .right #pieEcharts {
            width: 100%;
            height: 240px;
            margin-top: 33px;
            margin-bottom: 10px;
        }

        .box .box-right .box-right-main .right .details {
            width: 100%;
            text-align: center;
            margin-left: 12px;
            margin-right: 10px;
        }

        .box .box-right .box-right-main .right .details .p1 {
            font-size: 16px;
        }

        .box .box-right .box-right-main .right .details .p2 {
            width: 100%;
            text-align: left;
            font-size: 10px;
            padding: 0 10px;
            color: #7f8daf;
            box-sizing: border-box;
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
        }

        .box .box-right .box-right-main .left p {
            display: flex;
            justify-content: space-around;
            padding-left: 13%;
            padding-right: 4%;
        }

        .box .box-right .box-right-main .left p span {
            /* margin-left: 80px; */
        }

        .box .box-right .box-right-xia {
            width: 100%;
            height: 360px;
            margin-top: 16px;
            overflow: hidden;
            background: url(image/sheng-right-xia.png) no-repeat;
            background-size: 100% 100%;
        }

        .box .box-right .box-right-xia .box-list ul {
            margin-top: 60px;
            padding: 1px 40px;
        }

        .box .box-right .box-right-xia .box-list li {
            width: 100%;
            height: 15px;
            margin-top: 15px;
            display: flex;
            align-items: center;
        }

        .box .box-right .box-right-xia .box-list li .name {
            font-size: 12px;
            width: 175px;
            color: #fff;
            margin: 0 10px;
        }

        .box .box-right .box-right-xia .box-list li .name i {
            margin-top: 4px;
        }

        .box .box-right .box-right-xia .box-list li .name span {
            margin-left: 8px;
        }

        .box .box-right .box-right-xia .box-list li strong {
            color: #fbed47;
            font-weight: bold;
            margin-left: 6px;
            font-size: 13px;
        }

        .box .box-right .box-right-xia .box-list li .vol {
            width: 500px;
            height: 13px;
            margin-top: 3px;
            margin-right: 35px;
            overflow: hidden;
            background-color: rgba(185, 139, 139, 0.1);
        }

        .box .box-right .box-right-xia .box-list li .vol span {
            display: block;
            height: 13px;
            width: 300px;
            border-radius: 3px;
            overflow: hidden;
            background-image: linear-gradient(90deg, #4bb6fc 0%, #489b27 100%), linear-gradient(#099fac, #099fac);
            background-blend-mode: normal, normal;
        }
    </style>

    <style type="text/css">
        .dbox {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 123456789;
            font-size: 15px;
            color: #000;
        }

        .dbox.is-visible {
            display: block;
        }

        .dbox.full-screen .dbox-container {
            position: relative;
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: 0;
            background: #fff;
            border-radius: 0;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
        }

        .dbox .dbox-container {
            max-width: 300px;
            position: relative;
            top: 45%;
            margin-left: auto;
            margin-right: auto;
            background: #fff;
            border-radius: 0;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            overflow: hidden;
        }

        .dbox .dbox-header {
            display: none;
            font-weight: bold;
            line-height: 40px;
            padding-left: 8px;
            padding-right: 8px;
            text-align: center;
        }

        .dbox .dbox-content {
            overflow: auto;
        }

        .dbox .dbox-footer {
            padding: 0;
            margin: 0 -1px 0 0;
            overflow: hidden;
            zoom: 1;
            text-align: center;
        }

        .dbox .dbox-footer li {
            float: left;
            overflow: hidden;
        }

        .dbox .dbox-footer a {
            display: block;
            height: 50px;
            line-height: 50px;
            border-right: 1px solid #ddd;
            border-top: 1px solid #ddd;
            color: #000;
            text-decoration: none !important;
        }

        .dbox .dbox-footer a:active {
            background-color: #ddd;
        }

        .dbox-css-alert .dbox-container,
        .dbox-css-confirm .dbox-container,
        .dbox-css-cute .dbox-container,
        .dbox-css-modal-cute .dbox-container,
        .dbox-css-select .dbox-container {
            border-radius: 3px;
        }

        .dbox-css-select .dbox-header:not(:empty) {
            border-bottom: 1px solid #ddd;
        }

        .dbox-css-alert .dbox-content,
        .dbox-css-confirm .dbox-content,
        .dbox-css-cute .dbox-content,
        .dbox-css-modal-cute .dbox-content {
            line-height: 20px;
            padding: 33px 15px;
            text-align: center;
        }

        .dbox-css-cute {
            background-color: transparent;
        }

        .dbox-css-cute .dbox-container {
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
        }

        .dbox-css-loading {
            background-color: rgba(0, 0, 0, .5);
        }

        .dbox-css-loading .dbox-container {
            width: 25px !important;
            height: 25px !important;
            background: transparent url(http://mat1.gtimg.com/henan/1217/dbox-loading.gif) no-repeat center center;
            -wekit-tbackground-size: contain;
            -moz-background-size: contain;
            -ms-background-size: contain;
            -o-background-size: contain;
            background-size: contain;
        }

        .dbox-css-select .dbox-content {
            padding-left: 3px;
            padding-right: 3px;
        }

        .dbox-css-select .dbox-content .dbox-select-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .dbox-select-list .item {
            border-top: 1px solid #ddd;
            padding: 5px 15px;
            line-height: 35px;
        }

        .dbox-select-list .item:active {
            background-color: #ddd;
        }

        .dbox-select-list .item:first-child {
            border-top: 0;
        }
    </style>
</head>

<body>
    <div class="pagemain page11">
        <div class="center-main">
            <div class="page-top-tab-nav">
                <ul>
                    <li class="current"><a href="#">生物旅游资源</a></li>
                </ul>
            </div>
            <div class="box">
                <div class="box-left">
                    <h1>植物的宝库 动物的天堂</h1>
                    <div class="box-left-main">
                        <div class="shang">
                            <div class="one">
                                <img src="image/sheng-c.png" alt="">
                                <p>1900余种植物</p>
                            </div>
                            <div class="two">
                                <img src="image/sheng-h.png" alt="">
                                <p>260余种脊椎动物</p>
                            </div>
                            <div class="three">
                                <img src="image/sheng-hudie.png" alt="">
                                <p>300多种蝴蝶及昆虫</p>
                            </div>
                        </div>
                        <div class="xia">
                            <div>
                                <img src="image/sheng-hou.png" alt="">
                            </div>
                            <div>
                                <img src="image/sheng-hua1.png" alt="">
                            </div>
                            <div>
                                <img src="image/sheng-hua2.png" alt="">
                            </div>
                            <div>
                                <img src="image/sheng-hua3.png" alt="">
                            </div>
                        </div>
                        <div class="niao">
                            <div>
                                <img src="image/sheng-niao1.png" alt="">
                            </div>
                            <div>
                                <img src="image/sheng-niao2.png" alt="">
                            </div>
                            <div>
                                <img src="image/sheng-niao3.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-right">
                    <h1>旅游资源体量巨大 类型丰富</h1>
                    <div class="box-right-main">
                        <div class="left">
                            <div id="barEcharts"
                                style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;"
                                _echarts_instance_="ec_1573011199511">
                                <div
                                    style="position: relative; overflow: hidden; width: 410px; height: 270px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                                    <canvas width="410" height="270" data-zr-dom-id="zr_0"
                                        style="position: absolute; left: 0px; top: 0px; width: 410px; height: 270px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
                                </div>
                                <div
                                    style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 78px; top: 80px;">
                                    100%</div>
                            </div>
                            <p>
                                <span>主类</span>
                                <span>亚类</span>
                                <span>基本类</span>
                            </p>
                        </div>
                        <div class="right">
                            <div id="pieEcharts" _echarts_instance_="ec_1573011199512"
                                style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;">
                                <div
                                    style="position: relative; overflow: hidden; width: 390px; height: 240px; padding: 0px; margin: 0px; border-width: 0px;">
                                    <canvas width="390" height="240" data-zr-dom-id="zr_0"
                                        style="position: absolute; left: 0px; top: 0px; width: 390px; height: 240px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
                                </div>
                                <div></div>
                            </div>
                            <div class="details">
                                <p class="p1">7处五级旅游资源单体</p>
                                <p class="p2">红岩绝壁断层景观、八里沟大瀑布、回龙挂壁公路、十字岭垂直自然地带、回龙红岩大峡谷、太行绝壁珍稀植物群、天下第一铁顶老爷顶</p>
                            </div>
                        </div>
                    </div>
                    <div class="box-right-xia">
                        <div class="box-list box1">
                            <ul id="vBox1">
                                <li>
                                    <div class="name"><i>1</i> <span>全部</span></div>
                                    <div class="vol"><span ticsearch="" style="width: 100%"></span></div>
                                    <strong>397</strong>
                                </li>
                                <li>
                                    <div class="name"><i>2</i> <span>地文景观类</span></div>
                                    <div class="vol"><span ticsearch="" style="width: 25%"></span></div>
                                    <strong>78</strong>
                                </li>
                                <li>
                                    <div class="name"><i>3</i> <span>水域风光类</span></div>
                                    <div class="vol"><span ticsearch="" style="width: 20%"></span></div>
                                    <strong>41</strong>
                                </li>
                                <li>
                                    <div class="name"><i>4</i> <span>生物景观类</span></div>
                                    <div class="vol"><span ticsearch="" style="width: 30%"></span></div>
                                    <strong>60</strong>
                                </li>
                                <li>
                                    <div class="name"><i>5</i> <span>天象与气候景观类</span></div>
                                    <div class="vol"><span ticsearch="" style="width: 8%"></span></div>
                                    <strong>12</strong>
                                </li>
                                <li>
                                    <div class="name"><i>6</i> <span>遗址遗迹类</span></div>
                                    <div class="vol"><span ticsearch="" style="width: 9%"></span></div>
                                    <strong>13</strong>
                                </li>
                                <li>
                                    <div class="name"><i>7</i> <span>建筑与设施类</span></div>
                                    <div class="vol"><span ticsearch="" style="width: 30%"></span></div>
                                    <strong>116</strong>
                                </li>
                                <li>
                                    <div class="name"><i>8</i> <span>旅游商品类</span></div>
                                    <div class="vol"><span ticsearch="" style="width: 20%"></span></div>
                                    <strong>52</strong>
                                </li>
                                <li>
                                    <div class="name"><i>9</i> <span>人文活动类</span></div>
                                    <div class="vol"><span ticsearch="" style="width: 12%"></span></div>
                                    <strong>25</strong>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="lib/dyw.min.js"></script>
    <script src="js/shengwulvyou.js"></script>


</body>

</html>